<template>
    <div>
        <!-- 进出站管理 -->
        <!-- 左侧导航栏 -->
        <el-row>
            <el-col :span="4" class="left-nav">
                <el-menu class="el-menu-vertical-demo" :default-active="dfActive">
                    <el-submenu index="1">
                        <template slot="title">
                            <img src="../../assets/imgs/inquire_icon_shoupiao_default.png" alt="">&nbsp;
                            <span>售票</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1" @click="switchTo(1)">售票明细</el-menu-item>
                            <el-menu-item index="1-2" @click="switchTo(2)">外站售票明细</el-menu-item>
                            <el-menu-item index="1-3" @click="switchTo(3)">特检记录</el-menu-item>
                            <el-menu-item index="1-4" @click="switchTo(4)">改签记录</el-menu-item>
                            <el-menu-item index="1-5" @click="switchTo(5)">预售票查询</el-menu-item>
                            <el-menu-item index="1-6" @click="switchTo(6)">退废票查询</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <img src="../../assets/imgs/inquire_icon_dinggou_default.png" alt="">&nbsp;
                            <span>订购票</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1" @click="switchTo(7)">联网订购票查询</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <img src="../../assets/imgs/inquire_icon_zhifu_default.png" alt="">&nbsp;
                            <span>移动支付</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="3-1" @click="switchTo(8)">移动支付订单</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <img src="../../assets/imgs/inquire_icon_banci_default.png" alt="">&nbsp;
                            <span>班次</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="4-1" @click="switchTo(9)">班次计划查询</el-menu-item>
                            <el-menu-item index="4-2" @click="switchTo(10)">线路售票情况</el-menu-item>
                            <el-menu-item index="4-3" @click="switchTo(11)">发班记录查询</el-menu-item>
                            <el-menu-item index="4-4" @click="switchTo(12)">并班记录</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <img src="../../assets/imgs/inquire_icon_caiwu_default.png" alt="">&nbsp;
                            <span>财务</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="5-1" @click="switchTo(13)">售票汇总单</el-menu-item>
                            <el-menu-item index="5-2" @click="switchTo(14)">结算汇总单</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
            <!-- 路由 -->
            <el-col :span="20" class="router-container">
                <router-view @sendActive="getActive"></router-view>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
data: function(){
return {
    dfActive:"1-1"
}
},
methods:{
    switchTo(i){
        switch(i){
            case 1:this.$router.push("/index/check/ticketingDetail");break;
            case 2:this.$router.push("/index/check/outTicketingDetail");break;
            case 3:this.$router.push("/index/check/specialRecord");break;
            case 4:this.$router.push("/index/check/changeRecord");break;
            case 5:this.$router.push("/index/check/preBookingEnquiry");break;
            case 6:this.$router.push("/index/check/refundTicketInquiries");break;
            case 7:this.$router.push("/index/check/netBookingEnquiry");break;
            case 8:this.$router.push("/index/check/mobilePayment");break;
            case 9:this.$router.push("/index/check/scheduleEnquiry");break;
            case 10:this.$router.push("/index/check/lineTicketing");break;
            case 11:this.$router.push("/index/check/recordEnquiry");break;
            case 12:this.$router.push("/index/check/classRecord");break;
            case 13:this.$router.push("/index/check/tichetingNote");break;
            case 14:this.$router.push("/index/check/summarySheet");break;
        }
    },
    getActive(val){
        this.dfActive=val;
        console.log(this.dfActive)
    }
},
computed:{},
watch:{},
mounted() {
    this.$emit("sendTag",7);
}
}
</script>
<style scoped>
.left-nav{
    border:1px solid #EDEEF0;
}
</style>